<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./font/iconfont.css">
    <link rel="stylesheet" href="style.css">

    <title>游戏商城</title>
</head>

<body>
    <header class="header">
        <div class="logo">
            <img src="./img/logo.png">
            <h1>游戏商城</h1>
        </div>
        <div class="menu">
            <ul>
                <li>
                    <img src="./img/房子.png" alt="">
                    <span>商店</span>
                </li>
                <li>
                    <img src="./img/电话簿.png" alt="">
                    <span>关于</span>
                </li>
                <li>
                    <img src="./img/气泡.png" alt="">
                    <span>社区</span>
                </li>
                <li>
                    <img src="./img/叉子.png" alt="">
                    <span>支持</span>
                </li>
            </ul>
        </div>
        <div class="side">
            <ul>
                <li class="side-menu" style="display: none;">
                    <i class="icon iconfont">&#xe65f;</i>
                </li>
                <li>
                    <i class="icon iconfont">&#xe8c8;</i>
                    <span>登录</span>
                </li>
                <li>
                    <i class="icon iconfont">&#xe62c;</i>
                    <span>购物车</span>
                </li>
                <li>
                    <i class="icon iconfont">&#xe694;</i>
                    <span>搜索</span>
                </li>
            </ul>
        </div>
    </header>
    <main class="main">
        <div class="show">
            <div class="new">
                <h4>新鲜事</h4>
                <img src="./img/ad1.jpg" alt="">
                <p>Windows+Mac+linux</p>
                <p>现正在发售 Tangledeep(正在开发中)</p>
                <div>￥47.00</div>
            </div>
            <div class="preferential">
                <h4>最新优惠</h4>
                <img src="./img/adhot_big1.jpg" alt="">
                <p>FREESPACE 2, STAR <br> TREK,STONEKEEP,MDK,<br> MESSIAH AND MORE <br> -60%
                </p>
                <p>剩余6天，06:11:32</p>
            </div>
        </div>
        <div class="list">
            <dl>
                <dt><img src="./img/game1.jpg" alt=""></dt>
                <dd class="list-item_title">Freedom Force</dd>
                <dd><span>-50%</span> <a href="#">￥47.00</a> </dd>
            </dl>
            <dl>
                <dt><img src="./img/game2.jpg" alt=""></dt>
                <dd class="list-item_title">Dreamfall Chapters</dd>
                <dd><span>-80%</span> <a href="#"> ￥50.00</a> </dd>
            </dl>
            <dl>
                <dt><img src="./img/game3.jpg" alt=""></dt>
                <dd class="list-item_title">Sundered</dd>
                <dd><span>-20%</span> <a href="#"> ￥56.00</a> </dd>
            </dl>
            <dl>
                <dt><img src="./img/game4.jpg" alt=""></dt>
                <dd class="list-item_title">Tooth Tail</dd>
                <dd><span>-10%</span> <a href="#"> ￥128.00</a> </dd>
            </dl>
            <dl>
                <dt><img src="./img/game5.jpg" alt=""></dt>
                <dd class="list-item_title">Children of Zodiarcs</dd>
                <dd><span>-40%</span> <a href="#"> ￥47.00</a> </dd>
            </dl>
        </div>
        <div class="content-nav">
            <ul>
                <li><a href="#">头条</a></li>
                <li>&bull;</li>
                <li><a href="#">畅销</a></li>
                <li>&bull;</li>
                <li><a href="#">新品</a></li>
                <li>&bull;</li>
                <li><a href="#">预览</a></li>
                <li>&bull;</li>
                <li><a href="#">促销</a></li>
            </ul>
        </div>
    </main>
    <footer class="footer">尾部</footer>
</body>

</html>